<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="author" content="wangbo">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>上机01</title>
  <!-- 引入外部样式 -->
  <link rel="stylesheet" href="../base.css">
  <!-- 当前页面的样式 -->
  <style>
    li{
      width: 230px;height: 280px;
    }
    /* 设置图片的宽度，不许超出父类 */
    li img{
      width: 100%;
      cursor: move;
    }
    li h4{
      /* 字体不加粗 */
      font-weight: normal;
      cursor: pointer;
       /* 父级框 必须是webkit的盒子 */
      display: -webkit-box;
      /* 超出部分隐藏 */
      overflow: hidden;
      /* 隐藏的部分用什么来代替 */
      text-overflow:ellipsis;
      /* 第几行省略 2 */
      -webkit-line-clamp: 2;
      /* 子元素排列的方式 */
      -webkit-box-orient: vertical;
    }
  </style>
</head>
<body>
  <!-- 类名用的是. > 子类同级+
    ul.clearfix>li>img:s+h4 -->
    <ul class="clearfix">
      <li>
        <img src="./tudou.jpg" alt="" srcset="">
        <h4>凯蒂.霍尔姆斯送女儿上学校,身水电费水电费穿灰色运动衫牛仔裤胜多负少</h4>
      </li>
    </ul>
</body>
</html>